<template>
    <div>
      <div class="table-container" v-if="isTableView">
        <el-table :data="tableData" style="width: 100%;" border highlight-current-row>
          <el-table-column prop="game_name" label="游戏名" width="180"></el-table-column>
          <el-table-column label="图片">
            <template #default="{ row }">
              <el-image
                style="width: 140px; height: 100px; border-radius: 0%"
                :src="'http://47.99.51.143:9000/files/' + row.game_image"
                :preview-src-list="['http://47.99.51.143:9000/files/' + row.game_image]"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="is_purchased" label="是否购买" width="140">
            <template #default="{ row }">
              {{ row.is_purchased == 1 ? '已购买' : '未购买' }}
            </template>
          </el-table-column>
          <el-table-column prop="game_description" label="游戏描述"></el-table-column>
          <el-table-column prop="release_date" label="发行日期"></el-table-column>
          <el-table-column prop="category" label="种类"></el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="primary" size="medium">
                <span @click="selectGame(row.gameId)">详情页</span>
              </el-button>
              <br><br>
              <el-button type="danger" size="medium">
                <span @click="backGame(row.id)">申请退款</span>
              </el-button>
              <br>
              
              <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="你确定要安装该游戏吗？"
                @confirm="downfile(row.url)"
              >
                <el-button slot="reference" type="success" size="medium" style="margin-top: 20px;">下载安装包</el-button>
              </el-popconfirm>
              
            </template>
          </el-table-column>
        </el-table>
      </div>


     <!--  //卡片 -->
      <div class="card-container" v-else>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in tableData" :key="item.id">
            <el-card class="card-10">
              <div style="display: flex;">
                <el-image
                  style="width: 140px; height: 100px;"
                  :src="'http://47.99.51.143:9000/files/' + item.game_image"
                ></el-image>
                <div style="padding: 14px;">
                  <h3>{{ item.game_name }}</h3>
                  <p>{{ item.game_description }}</p>
                  <div>发行日期: {{ item.release_date }}</div>
                  <div>种类: {{ item.category }}</div><br>
                  <el-button type="primary" size="medium">
                    <span @click="selectGame(item.gameId)">详情页</span>
                  </el-button>
                  <br>
                  <template slot-scope="scope">
                  <el-popconfirm
                    confirm-button-text="好的"
                    cancel-button-text="不用了"
                    icon="el-icon-info"
                    icon-color="red"
                    title="你确定要安装该游戏吗？"
                    @confirm="downfile(scope.row.url)"
                  >
                    <el-button slot="reference" type="success" size="medium" style="margin-top: 20px;">下载安装包</el-button>
                  </el-popconfirm>
                  </template>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-button type="primary" @click="toggleView">
        切换视图
      </el-button>
    </div>
  </template>
  
  <script>

  import request from '@/request/request.js';
  export default {
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        game: localStorage.getItem("game") ? JSON.parse(localStorage.getItem("game")) : {},
        tableData: [], // 你的数据源
        isTableView: true // 控制视图模式的标志位
      };
    },
    methods: {
      downfile(url) {
        window.open(url);
      },
      toggleView() {
        this.isTableView = !this.isTableView;
      },
      changeGameId(id) {
        console.log("更改游戏状态的 ID:", id);
        // 这里可以添加取消收藏的逻辑
      },
      load(id) {
        request.get("shop/purchased/" + id).then(res => {
          if (res.code === "0") {
            this.tableData = res.data;
          } else {
            this.$message.error('获取游戏列表失败');
          }
        });
      },
      backGame(id) {
        this.$confirm('你确定要申请退款吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.delete("shop/delete/" + id).then(res => {
            if (res.code === "0") {
              this.$message.success('申请退款成功');
              this.load(this.user.id);
            } else {
              this.$message.error('申请退款失败');
            }
          });
        }).catch(() => {
          this.$message.info('已取消申请退款');
        });
      },
      selectGame(id) {
        request.get("/games/" + id).then(res => {
          console.log(res.data);
          if (res.code === "0") {
            localStorage.setItem("game", JSON.stringify(res.data));
            this.$router.push({ path: '/gamedetail' });
          }

        });
      },
    },
    created() {

      this.load(this.user.id);
    }
  };
</script>
  
  <style>

  /* 样式适当调整 */
  .card-10 {
    margin-bottom: 20px;

    height: 300px;

  }

  .table-container .el-table__body td {

    background-color: #8080C0;
    color: rgb(0, 0, 0);
  }
</style>
  